<template>
  <el-card class="top" header="" shadow="hover">
    <el-tabs v-model="activeName" type="border-card" @tab-change="changeTab">
      <el-tab-pane label="服务状态" name="服务状态">
        <el-container>
          <el-header style="text-align: center;height: fit-content;padding: 0 0 20px">
            <div ref="网关">
              <el-button :type="serviceStatusType('system_gateway_gateway')" plain style="width: 100%;">应用网关 Gateway</el-button>
            </div>
          </el-header>
          <el-container>
            <el-aside style="padding: 0 20px;width:300px;border: 1px dashed var(--el-border-color); text-align: center">
              <div style="color: #606266;font-size: 12px;text-align: left;margin-left: -20px">监控</div>
              <div ref="控制台">
                <el-button :type="serviceStatusType('system_grafana_grafana')" plain style="width: 100%;display: inline-block;margin: 10px 0">控制台 Grafana</el-button>
              </div>
              <div ref="日志收集-服务端">
                <el-button :type="serviceStatusType('system_log_loki')" plain style="width: 100%;display: inline-block;margin: 10px 0">日志收集-服务端 Loki</el-button>
              </div>
              <div ref="日志收集-客户端">
                <el-button :type="serviceStatusType('system_log_promtail')" plain style="width: 100%;display: inline-block;margin: 10px 0">日志收集-客户端 Promtail</el-button>
              </div>
              <div ref="指标收集-服务端">
                <el-button :type="serviceStatusType('system_metric_prometheus')" plain style="width: 100%;display: inline-block;margin: 10px 0">指标收集-服务端 Prometheus</el-button>
              </div>
              <div ref="指标收集-主机">
                <el-button :type="serviceStatusType('system_metric_node-exporter')" plain style="width: 100%;display: inline-block;margin: 10px 0">指标收集-主机 NodeExporter</el-button>
              </div>
              <div ref="指标收集-缓存">
                <el-button :type="serviceStatusType('system_metric_redis-exporter')" plain style="width: 100%;display: inline-block;margin: 10px 0">指标收集-缓存 RedisExporter</el-button>
              </div>
              <div ref="指标收集-缓存">
                <el-button :type="serviceStatusType('system_metric_kvrocks-exporter')" plain style="width: 100%;display: inline-block;margin: 10px 0">指标收集-缓存 RedisExporter</el-button>
              </div>
              <div ref="指标收集-消息队列">
                <el-button :type="serviceStatusType('system_metric_rabbitmq-exporter')" plain style="width: 100%;display: inline-block;margin: 10px 0">指标收集-消息队列 RabbitMQExporter</el-button>
              </div>
              <div ref="指标收集-消息队列">
                <el-button :type="serviceStatusType('system_metric_rocketmq-exporter')" plain style="width: 100%;display: inline-block;margin: 10px 0">指标收集-消息队列 RocketMQExporter</el-button>
              </div>
              <div ref="指标收集-数据库">
                <el-button :type="serviceStatusType('system_metric_mysql-exporter')" plain style="width: 100%;display: inline-block;margin: 10px 0;">指标收集-数据库
                  <div> MySQLExporter</div>
                </el-button>
              </div>
              <div ref="链路跟踪">
                <el-button :type="serviceStatusType('system_trace_tempo')" plain style="width: 100%;display: inline-block;margin: 10px 0">链路跟踪 Tempo</el-button>
              </div>
            </el-aside>
            <el-container style="margin-left: 20px">
              <el-container style="margin-bottom: 20px">
                <el-main style="height:100%;border: 1px dashed var(--el-border-color);text-align: center;overflow: hidden;padding: 0 20px">
                  <div ref="应用" style="color: #606266;font-size: 12px;text-align: left;margin-left: -20px">应用</div>
                  <el-row :gutter="20" style="padding: 10px 0">
                    <el-col :span="6">
                      <div ref="后台管理">
                        <el-button :type="serviceStatusType('system_front_yunshitang-front-web')" plain style="width: 100%">后台管理</el-button>
                      </div>
                    </el-col>
                    <el-col :span="6">
                      <div ref="WEB点餐">
                        <el-button :type="serviceStatusType('system_front_yunshitang-front-order-web')" plain style="width: 100%">WEB点餐</el-button>
                      </div>
                    </el-col>
                    <el-col :span="6">
                      <div ref="H5">
                        <el-button :type="serviceStatusType('system_front_yunshitang-front-h5')" plain style="width: 100%">H5</el-button>
                      </div>
                    </el-col>
                    <el-col :span="6">
                      <div ref="公众号">
                        <el-button :type="serviceStatusType('system_front_yunshitang-front-gzh')" plain style="width: 100%">公众号</el-button>
                      </div>
                    </el-col>
                  </el-row>
                  <el-row :gutter="20" style="padding: 10px 0">
                    <el-col :span="6">
                      <div ref="支付分">
                        <el-button :type="serviceStatusType('system_front_yunshitang-front-zhifufen')" plain style="width: 100%">支付分</el-button>
                      </div>
                    </el-col>
                    <el-col :span="6">
                      <div ref="钉钉">
                        <el-button :type="serviceStatusType('system_front_yunshitang-front-alipaydingtalkwithhold')" plain style="width: 100%">钉钉</el-button>
                      </div>
                    </el-col>
                    <el-col :span="6">
                      <div ref="企业微信">
                        <el-button :type="serviceStatusType('system_front_yunshitang-front-h5-qywx')" plain style="width: 100%">企业微信</el-button>
                      </div>
                    </el-col>
                    <el-col :span="6">
                      <div ref="农行">
                        <el-button :type="serviceStatusType('system_front_yunshitang-front-nonghang')" plain style="width: 100%">农行</el-button>
                      </div>
                    </el-col>
                  </el-row>
                  <div ref="后端服务" style="border: 1px dashed var(--el-border-color);padding: 0 10px">
                    <el-row :gutter="20" style="padding: 10px 0">
                      <el-col :span="12">
                        <div>
                          <el-button :type="serviceStatusType('system_api_offline_yunshitang-api-offline')" plain style="width: 100%">API-内网</el-button>
                        </div>
                      </el-col>
                      <el-col :span="12">
                        <div>
                          <el-button :type="serviceStatusType('system_api_online_yunshitang-api-online')" plain style="width: 100%">API-外网</el-button>
                        </div>
                      </el-col>
                    </el-row>
                  </div>

                </el-main>

                <el-aside style="border: 1px dashed var(--el-border-color);text-align: center;overflow: hidden;padding: 0 20px;margin-left: 20px;width: 250px">
                  <div style="color: #606266;font-size: 12px;text-align: left;margin-left: -20px">支撑服务</div>
                  <div ref="数据库备份">
                    <el-button :type="serviceStatusType('system_mysql_backup') === 'danger' ?'info':serviceStatusType('system_mysql_backup')" plain style="width: 100%;display: inline-block;margin: 10px 0" type="primary">数据库备份 XtraBackup</el-button>
                  </div>
                  <div ref="内网穿透">
                    <el-button :type="serviceStatusType('system_frp_frpc')" plain style="width: 100%;display: inline-block;margin: 10px 0">内网穿透 Frp</el-button>
                  </div>
                  <div ref="磁盘测速">
                    <el-button :type="serviceStatusType('system_fio') === 'danger' ?'info':serviceStatusType('system_fio')" plain style="width: 100%;display: inline-block;margin: 10px 0">磁盘测速 fio</el-button>
                  </div>
                  <div ref="HTTP代理">
                    <el-button :type="serviceStatusType('system_proxy') === 'danger' ?'info':serviceStatusType('system_proxy')" plain style="width: 100%;display: inline-block;margin: 10px 0">HTTP代理</el-button>
                  </div>
                </el-aside>
              </el-container>
              <el-footer style="height:fit-content;width:100%;border: 1px dashed var(--el-border-color);text-align: center;overflow: hidden;padding: 0 20px">
                <div ref="中间件" style="color: #606266;font-size: 12px;text-align: left;margin-left: -20px">中间件</div>
                <el-row :gutter="20" style="padding: 10px 0">
                  <el-col :span="6">
                    <div ref="数据库">
                      <el-button :type="serviceStatusType('system_mysql_mysql')" plain style="width: 100%">关系数据库 MySQL</el-button>
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <div ref="时序数据库">
                      <el-button :type="serviceStatusType('system_tdengine_td-engine-1')" plain style="width: 100%">时序数据库 TDengine</el-button>
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <div ref="缓存">
                      <el-button :type="serviceStatusType('system_redis_redis')" plain style="width: 100%">缓存 Redis</el-button>
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <div ref="缓存Kvrocks">
                      <el-button :type="serviceStatusType('system_kvrocks_kvrocks')" plain style="width: 100%">缓存 Kvrocks</el-button>
                    </div>
                  </el-col>
                </el-row>
                <el-row :gutter="20" style="padding: 10px 0">
                  <el-col :span="8">
                    <div ref="消息队列">
                      <el-button :type="serviceStatusType('system_rabbitmq_rabbit-0')" plain style="width: 100%">消息队列 RabbitMQ</el-button>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div ref="消息队列RocketMQ">
                      <el-button :type="serviceStatusType('system_rocketmq_rocketmq-broker')" plain style="width: 100%">消息队列 RocketMQ</el-button>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div ref="对象存储">
                      <el-button :type="serviceStatusType('system_minio_minio')" plain style="width: 100%">对象存储 MinIO</el-button>
                    </div>
                  </el-col>
                </el-row>
                <el-row :gutter="20" style="padding: 10px 0">
                  <el-col :span="8">
                    <div ref="任务调度">
                      <el-button :type="serviceStatusType('system_task_xxljob')" plain style="width: 100%;">任务调度 XXL-Job</el-button>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div ref="流媒体服务play">
                      <el-button :type="serviceStatusType('system_zlmediakit_zlmediakit-play')" plain style="width: 100%;">流媒体服务 ( 播放 ) ZLMediaKit</el-button>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div ref="流媒体服务push">
                      <el-button :type="serviceStatusType('system_zlmediakit_zlmediakit-push')" plain style="width: 100%;">流媒体服务 ( 推流 ) ZLMediaKit</el-button>
                    </div>
                  </el-col>
                </el-row>
                <el-row :gutter="20" style="padding: 10px 0">
                  <el-col :span="12">
                    <div ref="流媒体服务easy-media">
                      <el-button :type="serviceStatusType('system_media_easy-media')" plain style="width: 100%;">流媒体服务 EasyMedia</el-button>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div ref="数据桥接">
                      <el-button :type="serviceStatusType('system_bridge_data-bridge')" plain style="width: 100%">数据桥接 DataBridge</el-button>
                    </div>
                  </el-col>
                </el-row>
              </el-footer>
            </el-container>
          </el-container>
        </el-container>


        <div style="margin-top: 80px">
          <el-button plain type="primary">正常</el-button>
          <el-button plain type="info">未部署</el-button>
          <el-button plain type="warning">存在异常</el-button>
          <el-button plain type="danger">已停止</el-button>
        </div>
      </el-tab-pane>
      <el-tab-pane label="离线镜像下载" name="离线镜像下载">
        <el-divider content-position="left">中间件</el-divider>
        <div style="margin-top: 10px">对象存储 ( MinIO ):
          <a href="https://tengyun-images.oss-cn-zhangjiakou.aliyuncs.com/minio[-arm].&lt;版本号&gt;.tar">https://tengyun-images.oss-cn-zhangjiakou.aliyuncs.com/minio[-arm].&lt;版本号&gt;.tar</a>
        </div>
        <div style="margin-top: 10px">时序数据库 ( TDengine ):
          <a href="https://tengyun-images.oss-cn-zhangjiakou.aliyuncs.com/tdengine[-arm].&lt;版本号&gt;.tar">https://tengyun-images.oss-cn-zhangjiakou.aliyuncs.com/tdengine[-arm].&lt;版本号&gt;.tar</a>
        </div>
        <div style="margin-top: 10px">数据库 ( MySQL ):
          <a href="https://tengyun-images.oss-cn-zhangjiakou.aliyuncs.com/mysql-ps[-arm].&lt;版本号&gt;.tar">https://tengyun-images.oss-cn-zhangjiakou.aliyuncs.com/mysql[-arm].&lt;版本号&gt;.tar</a>
        </div>
        <div style="margin-top: 10px">缓存 ( Redis ):
          <a href="https://tengyun-images.oss-cn-zhangjiakou.aliyuncs.com/redis[-arm].&lt;版本号&gt;.tar">https://tengyun-images.oss-cn-zhangjiakou.aliyuncs.com/redis[-arm].&lt;版本号&gt;.tar</a>
        </div>
        <div style="margin-top: 10px">缓存 ( Kvrocks ):
          <a href="https://tengyun-images.oss-cn-zhangjiakou.aliyuncs.com/kvrocks[-arm].&lt;版本号&gt;.tar">https://tengyun-images.oss-cn-zhangjiakou.aliyuncs.com/kvrocks[-arm].&lt;版本号&gt;.tar</a>
        </div>
        <div style="margin-top: 10px">消息队列 ( RabbitMQ ):
          <a href="https://tengyun-images.oss-cn-zhangjiakou.aliyuncs.com/rabbitmq[-arm].&lt;版本号&gt;.tar">https://tengyun-images.oss-cn-zhangjiakou.aliyuncs.com/rabbitmq[-arm].&lt;版本号&gt;.tar</a>
        </div>
        <div style="margin-top: 10px">消息队列 ( RocketMQ ):
          <a href="https://tengyun-images.oss-cn-zhangjiakou.aliyuncs.com/rocketmq[-arm].&lt;版本号&gt;.tar">https://tengyun-images.oss-cn-zhangjiakou.aliyuncs.com/rocketmq[-arm].&lt;版本号&gt;.tar</a>
        </div>
        <div style="margin-top: 10px">消息队列-控制台 ( RocketMQ-Dashboard ):
          <a href="https://tengyun-images.oss-cn-zhangjiakou.aliyuncs.com/rocketmq-dashboard[-arm].&lt;版本号&gt;.tar">https://tengyun-images.oss-cn-zhangjiakou.aliyuncs.com/rocketmq-dashboard[-arm].&lt;版本号&gt;.tar</a>
        </div>
        <div style="margin-top: 10px">消息队列 ( EMQX ):
          <a href="https://tengyun-images.oss-cn-zhangjiakou.aliyuncs.com/emqx[-arm].&lt;版本号&gt;.tar">https://tengyun-images.oss-cn-zhangjiakou.aliyuncs.com/emqx[-arm].&lt;版本号&gt;.tar</a>
        </div>
        <div style="margin-top: 10px">任务调度 ( XXL-Job ):
          <a href="https://tengyun-images.oss-cn-zhangjiakou.aliyuncs.com/xxl-job[-arm].&lt;版本号&gt;.tar">https://tengyun-images.oss-cn-zhangjiakou.aliyuncs.com/xxl-job[-arm].&lt;版本号&gt;.tar</a>
        </div>
        <div style="margin-top: 10px">流媒体服务 ( ZLMediaKit ):
          <a href="https://tengyun-images.oss-cn-zhangjiakou.aliyuncs.com/zlmediakit[-arm].&lt;版本号&gt;.tar">https://tengyun-images.oss-cn-zhangjiakou.aliyuncs.com/zlmediakit[-arm].&lt;版本号&gt;.tar</a>
        </div>
        <div style="margin-top: 10px">流媒体服务 ( EasyMedia ):
          <a href="https://tengyun-images.oss-cn-zhangjiakou.aliyuncs.com/easy-media[-arm].&lt;版本号&gt;.tar">https://tengyun-images.oss-cn-zhangjiakou.aliyuncs.com/easy-media[-arm].&lt;版本号&gt;.tar</a>
        </div>
        <div style="margin-top: 10px">数据桥接 ( DataBridge ):
          <a href="https://tengyun-images.oss-cn-zhangjiakou.aliyuncs.com/data-bridge[-arm].&lt;版本号&gt;.tar">https://tengyun-images.oss-cn-zhangjiakou.aliyuncs.com/data-bridge[-arm].&lt;版本号&gt;.tar</a>
        </div>
        <div style="margin-top: 10px">网关 ( Gateway ):
          <a href="https://tengyun-images.oss-cn-zhangjiakou.aliyuncs.com/gateway[-arm].&lt;版本号&gt;.tar">https://tengyun-images.oss-cn-zhangjiakou.aliyuncs.com/gateway[-arm].&lt;版本号&gt;.tar</a>
        </div>

        <el-divider content-position="left" style="margin-top: 50px">监控</el-divider>
        <div style="margin-top: 10px">控制台 ( Grafana ):
          <a href="https://tengyun-images.oss-cn-zhangjiakou.aliyuncs.com/grafana[-arm].&lt;版本号&gt;.tar">https://tengyun-images.oss-cn-zhangjiakou.aliyuncs.com/grafana[-arm].&lt;版本号&gt;.tar</a>
        </div>
        <div style="margin-top: 10px">日志收集-服务端 ( Loki ):
          <a href="https://tengyun-images.oss-cn-zhangjiakou.aliyuncs.com/loki[-arm].&lt;版本号&gt;.tar">https://tengyun-images.oss-cn-zhangjiakou.aliyuncs.com/loki[-arm].&lt;版本号&gt;.tar</a>
        </div>
        <div style="margin-top: 10px">日志收集-客户端 ( Promtail ):
          <a href="https://tengyun-images.oss-cn-zhangjiakou.aliyuncs.com/promtail[-arm].&lt;版本号&gt;.tar">https://tengyun-images.oss-cn-zhangjiakou.aliyuncs.com/promtail[-arm].&lt;版本号&gt;.tar</a>
        </div>
        <div style="margin-top: 10px">指标收集-服务端 ( Prometheus ):
          <a href="https://tengyun-images.oss-cn-zhangjiakou.aliyuncs.com/prometheus[-arm].&lt;版本号&gt;.tar">https://tengyun-images.oss-cn-zhangjiakou.aliyuncs.com/prometheus[-arm].&lt;版本号&gt;.tar</a>
        </div>
        <div style="margin-top: 10px">指标收集-客户端-服务器指标 ( NodeExporter ):
          <a href="https://tengyun-images.oss-cn-zhangjiakou.aliyuncs.com/node-exporter[-arm].&lt;版本号&gt;.tar">https://tengyun-images.oss-cn-zhangjiakou.aliyuncs.com/node-exporter[-arm].&lt;版本号&gt;.tar</a>
        </div>
        <div style="margin-top: 10px">指标收集-客户端-数据库指标 ( MySQLExporter ):
          <a href="https://tengyun-images.oss-cn-zhangjiakou.aliyuncs.com/mysql-exporter[-arm].&lt;版本号&gt;.tar">https://tengyun-images.oss-cn-zhangjiakou.aliyuncs.com/mysql-exporter[-arm].&lt;版本号&gt;.tar</a>
        </div>
        <div style="margin-top: 10px">指标收集-客户端-缓存指标 ( RedisExporter ):
          <a href="https://tengyun-images.oss-cn-zhangjiakou.aliyuncs.com/redis-exporter[-arm].&lt;版本号&gt;.tar">https://tengyun-images.oss-cn-zhangjiakou.aliyuncs.com/redis-exporter[-arm].&lt;版本号&gt;.tar</a>
        </div>
        <div style="margin-top: 10px">指标收集-客户端-缓存指标 ( KvrocksExporter ):
          <a href="https://tengyun-images.oss-cn-zhangjiakou.aliyuncs.com/kvrocks-exporter[-arm].&lt;版本号&gt;.tar">https://tengyun-images.oss-cn-zhangjiakou.aliyuncs.com/kvrocks-exporter[-arm].&lt;版本号&gt;.tar</a>
        </div>
        <div style="margin-top: 10px">指标收集-消息队列 ( RabbitMQExporter ):
          <a href="https://tengyun-images.oss-cn-zhangjiakou.aliyuncs.com/rabbitmq-exporter[-arm].&lt;版本号&gt;.tar">https://tengyun-images.oss-cn-zhangjiakou.aliyuncs.com/rabbitmq-exporter[-arm].&lt;版本号&gt;.tar</a>
        </div>
        <div style="margin-top: 10px">指标收集-消息队列 ( RocketMQExporter ):
          <a href="https://tengyun-images.oss-cn-zhangjiakou.aliyuncs.com/rocketmq-exporter[-arm].&lt;版本号&gt;.tar">https://tengyun-images.oss-cn-zhangjiakou.aliyuncs.com/rocketmq-exporter[-arm].&lt;版本号&gt;.tar</a>
        </div>
        <div style="margin-top: 10px">链路跟踪 ( Tempo ):
          <a href="https://tengyun-images.oss-cn-zhangjiakou.aliyuncs.com/tempo[-arm].&lt;版本号&gt;.tar">https://tengyun-images.oss-cn-zhangjiakou.aliyuncs.com/tempo[-arm].&lt;版本号&gt;.tar</a>
        </div>

        <el-divider content-position="left" style="margin-top: 50px">应用</el-divider>
        <div style="margin-top: 10px">API ( yunshitang-api ):
          <a href="https://tengyun-images.oss-cn-zhangjiakou.aliyuncs.com/tengyun-yunshitang-api[_项目标识][-arm].&lt;版本号&gt;.tar">https://tengyun-images.oss-cn-zhangjiakou.aliyuncs.com/tengyun-yunshitang-api[_项目标识][-arm].&lt;版本号&gt;.tar</a>
        </div>
        <div style="margin-top: 10px">前端-后台管理:
          <a href="https://tengyun-images.oss-cn-zhangjiakou.aliyuncs.com/tengyun-yunshitang-front-web[_项目标识][-arm].&lt;版本号&gt;.tar">https://tengyun-images.oss-cn-zhangjiakou.aliyuncs.com/tengyun-yunshitang-front-web[_项目标识][-arm].&lt;版本号&gt;.tar</a>
        </div>
        <div style="margin-top: 10px">前端-WEB点餐:
          <a href="https://tengyun-images.oss-cn-zhangjiakou.aliyuncs.com/tengyun-yunshitang-front-order-web[_项目标识][-arm].&lt;版本号&gt;.tar">https://tengyun-images.oss-cn-zhangjiakou.aliyuncs.com/tengyun-yunshitang-front-order-web[_项目标识][-arm].&lt;版本号&gt;.tar</a>
        </div>
        <div style="margin-top: 10px">前端-H5:
          <a href="https://tengyun-images.oss-cn-zhangjiakou.aliyuncs.com/tengyun-yunshitang-front-h5[_项目标识][-arm].&lt;版本号&gt;.tar">https://tengyun-images.oss-cn-zhangjiakou.aliyuncs.com/tengyun-yunshitang-front-h5[_项目标识][-arm].&lt;版本号&gt;.tar</a>
        </div>
        <div style="margin-top: 10px">前端-农行:
          <a href="https://tengyun-images.oss-cn-zhangjiakou.aliyuncs.com/tengyun-yunshitang-front-nonghang-h5[_项目标识][-arm].&lt;版本号&gt;.tar">https://tengyun-images.oss-cn-zhangjiakou.aliyuncs.com/tengyun-yunshitang-front-nonghang-h5[_项目标识][-arm].&lt;版本号&gt;.tar</a>
        </div>
        <div style="margin-top: 10px">前端-公众号:
          <a href="https://tengyun-images.oss-cn-zhangjiakou.aliyuncs.com/tengyun-yunshitang-front-gongzhonghao[_项目标识][-arm].&lt;版本号&gt;.tar">https://tengyun-images.oss-cn-zhangjiakou.aliyuncs.com/tengyun-yunshitang-front-gongzhonghao[_项目标识][-arm].&lt;版本号&gt;.tar</a>
        </div>
        <div style="margin-top: 10px">前端-支付分:
          <a href="https://tengyun-images.oss-cn-zhangjiakou.aliyuncs.com/tengyun-yunshitang-front-zhifufen[_项目标识][-arm].&lt;版本号&gt;.tar">https://tengyun-images.oss-cn-zhangjiakou.aliyuncs.com/tengyun-yunshitang-front-zhifufen[_项目标识][-arm].&lt;版本号&gt;.tar</a>
        </div>
        <div style="margin-top: 10px">前端-钉钉:
          <a href="https://tengyun-images.oss-cn-zhangjiakou.aliyuncs.com/tengyun-yunshitang-front-alipay-dingtalk-withhold[_项目标识][-arm].&lt;版本号&gt;.tar">https://tengyun-images.oss-cn-zhangjiakou.aliyuncs.com/tengyun-yunshitang-front-alipay-dingtalk-withhold[_项目标识][-arm].&lt;版本号&gt;.tar</a>
        </div>
        <div style="margin-top: 10px">前端-企业微信:
          <a href="https://tengyun-images.oss-cn-zhangjiakou.aliyuncs.com/tengyun-yunshitang-front-h5-qywx[_项目标识][-arm].&lt;版本号&gt;.tar">https://tengyun-images.oss-cn-zhangjiakou.aliyuncs.com/tengyun-yunshitang-front-h5-qywx[_项目标识][-arm].&lt;版本号&gt;.tar</a>
        </div>


        <el-divider content-position="left" style="margin-top: 50px">工具</el-divider>
        <div style="margin-top: 10px">内网穿透:
          <a href="https://tengyun-images.oss-cn-zhangjiakou.aliyuncs.com/frpc[-arm].&lt;版本号&gt;.tar">https://tengyun-images.oss-cn-zhangjiakou.aliyuncs.com/frpc[-arm].&lt;版本号&gt;.tar</a>
        </div>
        <div style="margin-top: 10px">数据库备份:
          <a href="https://tengyun-images.oss-cn-zhangjiakou.aliyuncs.com/mysql-backup[-arm].&lt;版本号&gt;.tar">https://tengyun-images.oss-cn-zhangjiakou.aliyuncs.com/mysql-backup[-arm].&lt;版本号&gt;.tar</a>
        </div>
        <div style="margin-top: 10px">磁盘测速:
          <a href="https://tengyun-images.oss-cn-zhangjiakou.aliyuncs.com/fio.tar">https://tengyun-images.oss-cn-zhangjiakou.aliyuncs.com/fio.tar</a>
        </div>
        <div style="margin-top: 10px">HTTP代理:
          <a href="https://tengyun-images.oss-cn-zhangjiakou.aliyuncs.com/proxy.tar">https://tengyun-images.oss-cn-zhangjiakou.aliyuncs.com/proxy[-arm].&lt;版本号&gt;.tar</a>
        </div>
      </el-tab-pane>
    </el-tabs>
  </el-card>
</template>

<script>
import LeaderLine from "leader-line-vue";

export default {
  name: "App",
  mounted() {
    this.$nextTick(function () {
      // this.drawLine()
    });
  },
  unmounted() {
    this.removeLine()
  },
  created() {
    this.listService()
  },
  data() {
    return {
      App: ['system_minio', 'system_mysql', 'system_tdengine', 'system_rabbitmq', 'system_rocketmq', 'system_redis', 'system_kvrocks', 'system_grafana', 'system_log', 'system_metric', 'system_trace', 'system_gateway', 'system_task', 'system_bridge', 'system_zlmediakit', 'system_media', 'system_front', 'system_api_offline', 'system_api_online', 'system_frp', 'system_mysql_backup', 'system_fio', 'system_proxy'],
      activeName: '服务状态',
      logoPath: import.meta.env.BASE_URL + '/covers.png',
      lines: [],
      services: {}
    };
  },
  methods: {
    changeTab(activeName) {
      this.$nextTick(function () {
        if (activeName === '服务状态') {
          this.listService()
          // return this.drawLine();
        }
        // this.removeLine()
      })
    },
    serviceStatusType(name) {
      return this.services[name] || 'info'
    },
    async listService() {
      let services = await this.post('/service/list', this.App);
      if (!services || services.length < 1) {
        return
      }

      for (let service of services) {
        if (service.ServiceStatus) {
          if (service.ServiceStatus.DesiredTasks === service.ServiceStatus.RunningTasks) {
            this.services[service.Spec.Name] = 'primary';
            continue
          }

          if (service.ServiceStatus.RunningTasks === 0) {
            this.services[service.Spec.Name] = 'danger';
            continue
          }

          this.services[service.Spec.Name] = 'warning';
          continue
        }
        this.services[service.Spec.Name] = 'primary';
      }
    },
    removeLine() {
      this.lines.forEach((line) => {
        line.remove()
      })
      this.lines = []
    },
    drawLine() {
      this.lines.push(
          LeaderLine.setLine(this.$refs["网关"], this.$refs["控制台"], {
            dash: {animation: true},
            color: '#d9ecff',
            path: 'magnet',
            startSocket: 'bottom',
          }),
          LeaderLine.setLine(this.$refs["网关"], this.$refs["应用"], {
            dash: {animation: true},
            color: '#d9ecff',
            path: 'straight',
            startSocket: 'bottom',
          }),
          LeaderLine.setLine(this.$refs["网关"], this.$refs["任务调度"], {
            dash: {animation: true},
            color: '#d9ecff',
            startSocket: 'bottom',
            endSocket: 'left'
          }),
          LeaderLine.setLine(this.$refs["网关"], this.$refs["中间件"], {
            dash: {animation: true},
            color: '#d9ecff',
            startSocket: 'bottom',
            endSocket: 'top'
          }),
          LeaderLine.setLine(this.$refs["日志收集-服务端"], this.$refs["对象存储"], {
            dash: {animation: true},
            color: '#d9ecff',
            startSocket: 'left',
            endSocket: 'bottom',
            path: 'grid'
          }),
          LeaderLine.setLine(this.$refs["日志收集-客户端"], this.$refs["网关"], {
            dash: {animation: true},
            color: '#d9ecff',
            startSocket: 'right',
            endSocket: 'bottom',
          }),
          LeaderLine.setLine(this.$refs["日志收集-客户端"], this.$refs["后端服务"], {
            dash: {animation: true},
            color: '#d9ecff',
            startSocket: 'right',
            endSocket: 'left',
            path: 'grid'
          }),
          LeaderLine.setLine(this.$refs["指标收集-服务端"], this.$refs["后端服务"], {
            dash: {animation: true},
            color: '#d9ecff',
            startSocket: 'right',
            endSocket: 'left',
            path: 'grid'
          }),
          LeaderLine.setLine(this.$refs["指标收集-缓存"], this.$refs["缓存"], {
            dash: {animation: true},
            color: '#d9ecff',
            startSocket: 'right',
            endSocket: 'top',
            path: 'grid'
          }),
          LeaderLine.setLine(this.$refs["指标收集-数据库"], this.$refs["数据库"], {
            dash: {animation: true},
            color: '#d9ecff',
            startSocket: 'right',
            endSocket: 'top',
            path: 'grid'
          }),
          LeaderLine.setLine(this.$refs["链路跟踪"], this.$refs["后端服务"], {
            dash: {animation: true},
            color: '#d9ecff',
            startSocket: 'right',
            endSocket: 'left',
            path: 'grid'
          }),
          LeaderLine.setLine(this.$refs["链路跟踪"], this.$refs["对象存储"], {
            dash: {animation: true},
            color: '#d9ecff',
            startSocket: 'right',
            endSocket: 'left',
          }),
          LeaderLine.setLine(this.$refs["任务调度"], this.$refs["后端服务"], {
            dash: {animation: true},
            color: '#d9ecff',
            startSocket: 'left',
            endSocket: 'right',
            path: 'grid'
          }),
          LeaderLine.setLine(this.$refs["流媒体服务"], this.$refs["后端服务"], {
            dash: {animation: true},
            color: '#d9ecff',
            startSocket: 'left',
            endSocket: 'right',
            path: 'grid'
          }),
          LeaderLine.setLine(this.$refs["数据库备份"], this.$refs["数据库"], {
            dash: {animation: true},
            color: '#d9ecff',
            startSocket: 'right',
            endSocket: 'bottom',
            path: 'grid'
          }),
          LeaderLine.setLine(this.$refs["后端服务"], this.$refs["中间件"], {
            dash: {animation: true},
            color: '#d9ecff',
            startSocket: 'bottom',
            endSocket: 'top'
          }),
      );
    },
  }
}
</script>

<style lang="scss" scoped>
:deep(.el-button) {
  cursor: default;
  border: 0;
}

:deep(.el-button:hover) {
  color: var(--el-button-text-color);
  border-color: var(--el-button-border-color);
  background-color: var(--el-button-bg-color);
  outline: 0;
}

:deep(.el-button:focus) {
  color: var(--el-button-text-color);
  border-color: var(--el-button-border-color);
  background-color: var(--el-button-bg-color);
  outline: 0;
}
</style>